<template>
	<view class="date-content">
		<u-toast ref="uToast"></u-toast>
		<view class="date-item">
			<u-form labelPosition="left" :model="model" ref="uForm">
				<u-form-item labelWidth="75" @click="addressShow = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">所在地</label>
					</template>
					<u-input v-model="model.dateInfo.addressText" disabled disabledColor="#ffffff" placeholder="请选择所在地"
						border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line"></view>
				<u-form-item labelWidth="75" @click="showType = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">收费类型</label>
					</template>
					<u-input v-model="dateType" disabled disabledColor="#ffffff" placeholder="请选择收费类型" border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line"></view>
				<u-form-item labelWidth="75">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">标的额/元</label>
					</template>
					<u-input v-model="model.dateInfo.matterFee" placeholder="请输入" border="none">
					</u-input>
				</u-form-item>
				<view class="line"></view>
			</u-form>
			<u-action-sheet :show="showType" :actions="actions" title="请选择收费类型" @close="showType = false"
				@select="typeSelect">
			</u-action-sheet>
			<u-picker :show="addressShow" confirmColor="#1C5AD2" :columns="addressList" :defaultIndex="[1]"
				@cancel="cancel" @confirm="confirmAdd" @change="changeAdd">
			</u-picker>
		</view>
		<view class="cal-result">
			<view>计算结果:</view>
			<text class="text r-flex" v-if="feeResult != null">{{ feeResult }}元</text>
		</view>
		<view class="cal-btn r-flex">
			<u-button @click="reset()" shape="circle" class="reset">重置</u-button>
			<u-button @click="calculate()" shape="circle" color="#1C5AD2">计算</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showType: false,
				// 地域
				addressShow: false,
				addressList: [
					['中国', '美国', '日本']
				],
				dateType: '按标的额比例收费',
				actions: [{
						name: '按标的额比例收费',
					},
					{
						name: '风险代理',
					}
				],
				model: {
					dateInfo: {
						matterFee: "",
						addressText: "",
					},
				},
				feeResult: null
			}
		},
		methods: {
			confirmAdd(e) {
				this.model.dateInfo.addressText = e.value.join('');
				this.addressShow = false;
			},
			cancel() {
				this.addressShow = false;
			},
			changeAdd() {

			},
			// 选择类型
			typeSelect(e) {
				this.dateType = e.name;
			},
			// 公共计算方法
			calculateLitigationCost(caseType, claimAmount) {
				// 根据案件类型和索赔金额计算诉讼费用
				var fee = 0;
				// 根据不同的案件类型应用不同的计费规则
				switch (caseType) {
					case "中国":
						// 根据索赔金额确定诉讼费用
						if (claimAmount <= 1000) {
							fee = 100;
						} else if (claimAmount <= 10000) {
							fee = 2000;
						} else {
							fee = 5000;
						}
						break;
					case "美国":
						// 根据索赔金额确定诉讼费用
						if (claimAmount > 1000) {
							fee = 1000;
						} else if (claimAmount <= 10000) {
							fee = 2000;
						} else {
							fee = 5000;
						}
						break;
					case "日本":
						// 根据不同的刑事案件类型确定诉讼费用
						// 这里只是一个示例，具体的刑事案件计费规则需要根据实际情况进行编写
						fee = 1000;
						break;
					default:
						break;
				}
				return fee;
			},
			// 计算
			calculate() {
				const that = this;
				const {
					addressText,
					matterFee
				} = this.model.dateInfo;
				if (addressText == '') {
					return this.$refs.uToast.show({
						message: '请选择所在地',
						type: 'default',
					})
				}
				if (matterFee == '') {
					return this.$refs.uToast.show({
						message: '请输入标的额',
						type: 'default',
					})
				}
				const caseType = this.model.dateInfo.addressText;
				const claimAmount = this.model.dateInfo.matterFee;
				this.feeResult = this.calculateLitigationCost(caseType, claimAmount);
			},
			// 重置
			reset() {
				this.model.dateInfo = {};
				this.feeResult = null;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.date-item {
		background-color: #fff;
		margin-top: 24rpx;
	}

	.line {
		height: 24rpx;
		background-color: #f7f6fa;
		border-top: solid 1px #e5e5e5;
	}

	.cal-result {
		margin-top: 24rpx;
		padding: 0 12px;
		font-size: 36rpx;
		color: #bcbfcc;

		.text {
			padding-top: 2rpx;
			color: #1C5AD2;
		}
	}

	.cal-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 30rpx;
		padding-bottom: 30rpx;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
	}

	.cal-btn /deep/ .u-button {
		width: 45%;
		height: 72rpx !important;
		margin-left: 24rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
	}

	.cal-btn /deep/ .u-button:first-child {
		width: 35%;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
		color: #a9aba8;
	}

	.date-item /deep/ .u-form-item {
		padding: 0 24rpx;
	}
</style>